<template>
	<y-scroll-seamless
		ref="yScrollSeamlessRef"
		:options="{ direction: 'left', step: 3, hoverStop: true }"
	>
		<template #slot1>
			<view class="display_flex">
				<view
					class="rowBubble"
					v-for="(item, index) in props.list"
					:id="index"
					:style="{ backgroundColor: bgc }"
				>
					<view class="center">
						<view>{{ userName }}</view>
						<view>送出了{{ item.offering }}</view>
					</view>
					<view class="right">
						<view v-if="item.offeringTitle === '敬香'">
							<image
								v-if="item.offering === '初级香'"
								:src="imgUrl + 'imgs/worship/worship_lz1.png'"
								mode=""
							></image>
							<image
								v-if="item.offering === '中级香'"
								:src="imgUrl + 'imgs/worship/worship_lz2.png'"
								mode=""
							></image>
							<image
								v-if="item.offering === '高级香'"
								:src="imgUrl + 'imgs/worship/worship_lz3.png'"
								mode=""
							></image>
						</view>
						<image v-else :src="item.offeringImage" mode=""></image>
					</view>
				</view>
			</view>
		</template>
		<!-- 一模一样的，兼容微信小程序 -->
		<template #slot2>
			<view class="display_flex">
				<view
					class="rowBubble"
					v-for="(item, index) in props.list"
					:id="index"
					:style="{ backgroundColor: bgc }"
				>
					<view class="center">
						<view>{{ userName }}</view>
						<view>送出了{{ item.offering }}</view>
					</view>
					<view class="right">
						<view v-if="item.offeringTitle === '敬香'">
							<image
								v-if="item.offering === '初级香'"
								:src="imgUrl + 'imgs/worship/worship_lz1.png'"
								mode=""
							></image>
							<image
								v-if="item.offering === '中级香'"
								:src="imgUrl + 'imgs/worship/worship_lz2.png'"
								mode=""
							></image>
							<image
								v-if="item.offering === '高级香'"
								:src="imgUrl + 'imgs/worship/worship_lz3.png'"
								mode=""
							></image>
						</view>
						<image v-else :src="item.offeringImage" mode=""></image>
					</view>
				</view>
			</view>
		</template>
	</y-scroll-seamless>
</template>

<script setup>
import { onMounted, ref, reactive, defineProps, watch } from 'vue';
import store from '@/store/index.js';
import { imgUrl } from '@/external/utils/imgUrl.js';

let props = defineProps({
	list: {
		default: [{}, {}, {}, {}, {}]
	},
	bgc: {
		default: 'rgba(255, 255, 255, 0.2)'
	}
});
const yScrollSeamlessRef = ref();

const userName = ref('');

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	if (!store.state.userInfo.userInfo.phoneNumber) {
		await store.dispatch('setUserInfo');
	}
	userName.value =
		store.state.userInfo.userInfo.nickname || store.state.userInfo.userInfo.phoneNumber;
};
getUserInfo();

watch(
	() => props.list,
	(newVal) => {
		// console.log('newVal', newVal);
		setTimeout(() => {
			yScrollSeamlessRef.value.stopScroll();
			yScrollSeamlessRef.value.init();
		}, 300);
	}
);

defineExpose({
	yScrollSeamlessRef
});
</script>

<style lang="scss">
::v-deep .uni-scroll-view-content {
	display: flex;
}

.rowBubble {
	position: relative;
	flex-shrink: 0;
	bottom: 0rpx;
	height: 80rpx;
	box-sizing: border-box;
	padding: 18rpx 32rpx;
	background: rgba(201, 154, 114, 0.3);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	margin-left: 32rpx;
	z-index: 9999;
	overflow: hidden;

	.center {
		display: flex;
		font-weight: 400;
		line-height: 32rpx;
		view:nth-child(1) {
			font-size: 26rpx;
			color: #fff;
			margin-right: 12rpx;
		}

		view:nth-child(2) {
			font-size: 26rpx;
			color: #fbc438;
			margin-right: 96rpx;
		}
	}

	.right {
		position: absolute;
		right: 32rpx;
		top: 0;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}
</style>
